<template >
	<div class="content">
		<div class="content-header">试题管理</div>
		<div class="content-table"
		>
			<el-form inline size="mini">
				<el-form-item >
					<el-input  placeholder="试题题干" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="form.type"  placeholder="请选择试题类型"  style="width: 100%">
						<el-option
								v-for="item in typeList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getList">查 询</el-button>
					<el-button icon="el-icon-refresh" @click="resetList">重 置</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="addDialog = true">新 建</el-button>
					<el-button  icon="el-icon-download" @click="downloadFile">下载模板</el-button>
					<el-upload
							style="display: inline-block;margin: 0 10px"
							class="upload-demo"
							:action=uploadUrl
							:headers=myHeaders
							ref="upload"
							:on-success="leadingIn"
							:limit="1"
							:show-file-list="false"
					>
						<el-button size="mini">批量导入</el-button>
					</el-upload>
					<el-button icon="el-icon-finished" @click="openPlay">试题打组</el-button>
				</el-form-item>
			</el-form>
			<el-table
					:data="tableData"
					stripe
					@selection-change="handleSelectionChange">
				<el-table-column
						type="selection"
						align="center"
						>
				</el-table-column>
				<el-table-column
						prop="number"
						label="自增编号"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="name"
						label="题干"
						align="center"
						show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column
						label="题型"
						align="center"
				>
					<template slot-scope="scope">
						{{scope.row.type === 1? '单选' :scope.row.type === 2? '多选' : scope.row.type === 3? '判断' : '填空'}}
					</template>
				</el-table-column>
				<el-table-column
						label="选项"
						align="center"
						show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{scope.row.options ? scope.row.options : '该题型无选项' }}
					</template>
				</el-table-column>
				<el-table-column
						label="正确答案"
						align="center"
				>
					<template slot-scope="scope">
						{{scope.row.type  === 3 ? (scope.row.answer === '1' ? '正确' : '错误') : scope.row.answer}}
					</template>
				</el-table-column>
				<el-table-column
						label="操作"
						align="center"
				>
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="openEdit(scope.row)">编 辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-footer">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					background
					:page-size="10"
					small
					layout="total, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		<!--新增试题-->
		<el-dialog title="新增试题" :visible.sync="addDialog" width="30%">
			<el-form label-width="90px" size="small" :model="addForm" :rules="rules" ref="addForm" >
				<el-form-item label="试题类型:" prop="type">
					<el-select v-model="addForm.type"  placeholder="请选择试题类型" @change="addForm.answer = ''" style="width: 100%">
						<el-option
								v-for="item in typeList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题干:" prop="name">
					<el-input type="textarea" v-model="addForm.name" placeholder="请输入题干"></el-input>
				</el-form-item>
				<el-form-item  label="选项A:" v-show="addForm.type === 1 || addForm.type === 2">
					<el-input   placeholder="请输入选项A" v-model="titleA"></el-input>
				</el-form-item>
				<el-form-item  label="选项B:" v-show="addForm.type === 1 || addForm.type === 2">
					<el-input   placeholder="请输入选项B" v-model="titleB"></el-input>
				</el-form-item>
				<el-form-item  label="选项C:" v-show="addForm.type === 1 || addForm.type === 2">
					<el-input   placeholder="请输入选项C" v-model="titleC"></el-input>
				</el-form-item>
				<el-form-item  label="选项D:" v-show="addForm.type === 1 || addForm.type === 2">
					<el-input   placeholder="请输入选项D" v-model="titleD"></el-input>
				</el-form-item>
				<el-divider></el-divider>
				<el-divider></el-divider>
				<el-form-item   label="正确答案:" v-show="addForm.type === 1">
					<el-radio-group v-model="addForm.answer">
						<el-radio label="A">选项A</el-radio>
						<el-radio label="B">选项B</el-radio>
						<el-radio label="C">选项C</el-radio>
						<el-radio label="D">选项D</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item  label="正确答案:" v-show="addForm.type === 2">
					<el-checkbox-group v-model="answerList">
						<el-checkbox  label="A">A</el-checkbox>
						<el-checkbox label="B" >B</el-checkbox>
						<el-checkbox label="C" >C</el-checkbox>
						<el-checkbox label="D" >D</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item   label="正确答案:" v-show="addForm.type === 3">
					<el-radio-group v-model="addForm.answer">
						<el-radio :label="1">正确</el-radio>
						<el-radio :label="2">错误</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item  label="正确答案:" v-show="addForm.type === 4">
					<el-input type="textarea" v-model="addForm.answer" placeholder="请输入正确答案"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false" size="small">取 消</el-button>
				<el-button type="primary"  @click="submit('addForm')"  size="small">确 定</el-button>
			</div>
		</el-dialog>
		<!--编辑试题-->
		<el-dialog title="编辑试题" :visible.sync="editDialog" width="30%">
			<el-form label-width="90px" size="small" :model="editForm" :rules="rules" ref="editForm" >
				<el-form-item label="试题类型:" prop="type">
					<el-select v-model="editForm.type"  placeholder="请选择试题类型" @change="addForm.answer = ''" style="width: 100%">
						<el-option
								v-for="item in typeList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="题干:" prop="name">
					<el-input type="textarea" v-model="editForm.name" placeholder="请输入题干"></el-input>
				</el-form-item>
				<el-form-item  label="选项A:" v-show="editForm.type === 1 || editForm.type === 2">
					<el-input   placeholder="请输入选项A" v-model="titleA"></el-input>
				</el-form-item>
				<el-form-item  label="选项B:" v-show="editForm.type === 1 || editForm.type === 2">
					<el-input   placeholder="请输入选项B" v-model="titleB"></el-input>
				</el-form-item>
				<el-form-item  label="选项C:" v-show="editForm.type === 1 || editForm.type === 2">
					<el-input   placeholder="请输入选项C" v-model="titleC"></el-input>
				</el-form-item>
				<el-form-item  label="选项D:" v-show="editForm.type === 1 || editForm.type === 2">
					<el-input   placeholder="请输入选项D" v-model="titleD"></el-input>
				</el-form-item>
				<el-divider></el-divider>
				<el-divider></el-divider>
				<el-form-item   label="正确答案:" v-show="editForm.type === 1">
					<el-radio-group v-model="editForm.answer">
						<el-radio label="A">选项A</el-radio>
						<el-radio label="B">选项B</el-radio>
						<el-radio label="C">选项C</el-radio>
						<el-radio label="D">选项D</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item  label="正确答案:" v-show="editForm.type === 2">
					<el-checkbox-group v-model="answerList">
						<el-checkbox  label="A">A</el-checkbox>
						<el-checkbox label="B" >B</el-checkbox>
						<el-checkbox label="C" >C</el-checkbox>
						<el-checkbox label="D" >D</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item   label="正确答案:" v-show="editForm.type === 3">
					<el-radio-group v-model="editForm.answer">
						<el-radio label="1">正确</el-radio>
						<el-radio label="2">错误</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item  label="正确答案:" v-show="editForm.type === 4">
					<el-input type="textarea" v-model="editForm.answer" placeholder="请输入正确答案"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false" size="small">取 消</el-button>
				<el-button type="primary"  @click="submitEdit('editForm')"  size="small">确 定</el-button>
			</div>
		</el-dialog>
		<!--试题打组-->
		<el-dialog title="试题打组" :visible.sync="playDialog" width="25%">
			<el-form label-width="90px" size="small" :model="playForm" :rules="rulesOne" ref="playForm">
				<el-form-item label="名称:" prop="name">
					<el-input v-model="playForm.name" placeholder="请输入试题组名称"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="playDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submitPlay('playForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template >

<script >
	import {addQuestion,questionList,delQuestion,editQuestion,playQuestion} from "../api/question";
    import request from "../utils/request";
    import common from "../utils/common";
    export default {
        data(){
            return{
                uploadUrl: common.requestUrl + '/questions/uploadQuestions',
                myHeaders: {
                    ferment: ''
                },
                tableData:[],
                total:null,
				addDialog:false,
				addForm:{
                    answer: "",
                    name: "",
                    options: "",
                    type: 1
				},
                answerList:[],
                titleA:'',
                titleB:'',
                titleC:'',
                titleD:'',
				typeList:[
					{
					    id:1,
						name:'单选'
					},
					{
					    id:2,
						name:'多选'
					},
                    {
                        id:3,
                        name:'判断'
                    },
                    {
                        id:4,
                        name:'填空'
                    }
				],
                rules: {
                    name:[
                        {required: true, message: '请输入题干', trigger: 'blur'},
                    ],
                   
                    type: [
                        {required: true, message: '请选择题型', trigger: 'change'}
                    ],
                    options: [
                        {required: true, message: '请输入选项', trigger: 'blur'},
                    ],
                    answer: [
                        {required: true, message: '请输入答案', trigger: 'blur'},
                    ],
                    answerA: [
                        {required: true, message: '请选择答案', trigger: 'change'},
                    ],
                },
				rulesOne:{
                    name:[
                        {required: true, message: '请输入试题组名称', trigger: 'blur'},
                    ],
				},
				form:{
                    name: "",
                    pageIndex: 1,
                    pageSize: 10,
                    type: null
				},
                editDialog:false,
                editForm:{},
				idList:[],
				playDialog:false,
				playForm:{
                    name: "",
                    questionIds: []
				}
            }
        },
		mounted() {
            this.getList()
        },
        created() {
            this.myHeaders.ferment = sessionStorage.getItem('token')
        },
        methods: {
            //展开试题打组弹窗
            openPlay(){
              if (this.idList.length){
                  this.playDialog = true
				  this.playForm.questionIds =[...new Set(this.idList)]
                  console.log(this.playForm.questionIds)
			  }else {
                  this.$notify.error('请至少选择一项试题')
			  }
			},
			//试题打组
            submitPlay(playForm){
                this.$refs[playForm].validate((valid) => {
                    if (valid) {
                        playQuestion(this.playForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.playDialog = false
                                this.playForm = {}
                                this.idList = []
                                this.getList()
                            }
                        })
                    }
                });
			},
            handleSelectionChange(val) {
				val.forEach(item => {
					this.idList.push(item.id)
				})
            },
            //分页
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            },
			//下载模板
            downloadFile() {
                request({
                    url: common.requestUrl + "/questions/downloadTemplate",
                    method: 'get',
                    responseType: 'blob',
                }).then(resp => {
                    console.log('ppp', resp)
                    const blob = new Blob([resp.data], {type: "application/vnd.ms-excel"});
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.download = '试题模板.xls';
                    a.href = url;
                    a.click();
                })  //导出文件请求
            },
			//上传模板
            leadingIn(res) {
                if (res.code !== 200) {
                    this.$notify.error(res.message)
                } else {
                    this.$notify.success(res.message)
                    this.getList()
                }
                this.$refs.upload.clearFiles() //上传成功之后清除历史记录
            },
            async getList(){
                const { data } = await questionList(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
			},
            //新增账户
            submit(addForm){
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
						if (this.addForm.type === 1){
						    const str = 'A.'+this.titleA +"&"+'B.'+this.titleB+"&"+'C.'+this.titleC+"&"+'D.'+this.titleD
						    this.addForm.options = str
						}else if (this.addForm.type === 2){
                            const str = 'A.'+this.titleA +"&"+'B.'+this.titleB+"&"+'C.'+this.titleC+"&"+'D.'+this.titleD
                            this.addForm.options = str
							this.addForm.answer = this.answerList.join(',')
                            console.log(this.addForm)
						} else {
						    this.addForm.options = ''
						}
                        addQuestion(this.addForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.addDialog = false
                                this.addForm = {
                                    answer: "",
                                    name: "",
                                    options: "",
                                    type: 1
								}
                                this.titleA = ''
                                this.titleB = ''
                                this.titleC = ''
                                this.titleD = ''
                                this.answerList = []
                                this.getList()
                            }
                        })
                    }
                });
            },
			//重置
            resetList(){
                this.form.name = ''
				this.form.type = null
				this.getList()
			},
            //删除试题
            del(id){
                this.$confirm('删除该试题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delQuestion(id).then(res => {
                        if (res.data.code === 200){
                            this.$notify.success(res.data.message)
                            this.getList()
                        }
                    })
                })
            },
			//编辑弹窗
            openEdit(item){
                console.log(item)
				const {answer,id,name,options,type} = item
				this.editForm = {answer,id,name,options,type}
				if (this.editForm.type === 1 || this.editForm.type === 2){
                    this.answerList = this.editForm.answer.split(',')
                    const  titleArr = item.options.split('&')
                    this.titleA = titleArr[0].split('.')[1]
                    this.titleB = titleArr[1].split('.')[1]
                    this.titleC = titleArr[2].split('.')[1]
                    this.titleD = titleArr[3].split('.')[1]
				}
				this.editDialog = true
			},
            //提交编辑
            submitEdit(editForm){
                this.$refs[editForm].validate((valid) => {
                    if (valid) {
                        if (this.editForm.type === 1){
                            const str = 'A.'+this.titleA +"&"+'B.'+this.titleB+"&"+'C.'+this.titleC+"&"+'D.'+this.titleD
                            this.editForm.options = str
                        }else if (this.editForm.type === 2){
                            const str = 'A.'+this.titleA +"&"+'B.'+this.titleB+"&"+'C.'+this.titleC+"&"+'D.'+this.titleD
                            this.editForm.options = str
                            this.editForm.answer = this.answerList.join(',')
                            console.log(this.editForm)
                        } else {
                            this.editForm.options = ''
                        }
                        editQuestion(this.editForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.editDialog = false
                                this.editForm = {}
                                this.titleA = ''
                                this.titleB = ''
                                this.titleC = ''
                                this.titleD = ''
                                this.answerList = []
                                this.getList()
                            }
                        })
                    }
                });
            },
        },
    }
</script >

<style scoped lang="less" >
	@import "../assets/style/common";
</style >
